<template>
    <div class="scMiddleLayout" :style="{'grid-template-columns':tag.isCondition==0?'1fr 1fr 1fr':'1fr 1fr'}">
        <div class="scMiddle3" :style="{'grid-area':tag.isCondition==2?'2/1/3/2':'2 / 2 / 3 / 3'}">
            <p style="text-align: center;margin-top: -3px; font-size: 12px;">{{ tag.condition }}</p>
            <div class="scMiddle3-1"></div>
        </div>
        <div class="scMiddle1">
            <el-button style="width: 30%;height: 50%;">
        {{ tag.code }}
        </el-button>
        </div>
        <div v-if="tag.isCondition==1 || tag.isCondition==0" class="scMiddle2">
            <div class="scCard"></div>
            <div class="scCard"></div>
            <div class="scCard"></div>
            <div class="scCard"></div>
            
        </div>  
        <div v-if="tag.isCondition==2 || tag.isCondition==0" class="scMiddle4" :style="{'grid-area':tag.isCondition==2?'2 / 2 / 3 / 3':'2 / 3 / 3 / 4'}">
            <div class="scCard"></div>
            <div class="scCard"></div>
            <div class="scCard"></div>
            <div class="scCard"></div>
        </div>  

    </div>
</template>
   <script lang="ts" setup>
   import {ref} from "vue";
      //父级传递来的参数
    var props = defineProps({
     tag: {
     type: Object,
     default: { x: 0, y: 1, w: 1, h: 1, code: '10001',type:2,condition:"1",isCondition:1 },
     },
     });
 
   </script>

<style scoped>
   .scMiddleLayout {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows: 24px auto;
       grid-column-gap: 1px;
       grid-row-gap: 1px;
       height: 100%;
       background-color: #F8F8F8;
       padding: 2px;
   }
   .scMiddle3 {
       grid-area: 2 / 2 / 3 / 3;
       width: 100%;
       height: 90%;   
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
   }
   .scMiddle3-1 {
     
       width: 10px;
       height: 100%;
      border: 1px solid rgb(238, 231, 231);;
      border-radius: 3px;
      background-color: #CCF4DD;
     
      text-align: center;
      
      
   }
   .scMiddle1 {
      grid-area: 1 / 1 / 2 / 4;
      text-align: center;
      
      
  }

  .scMiddle2 {
     grid-area: 2 / 1 / 3 / 2;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
 }
 .scMiddle4 {
     grid-area: 2 / 3 / 3 / 4;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
 }
 .scCard{
      border: 1px solid rgb(238, 231, 231);
      border-radius: 5px;
      background-color: #9E9E9E;
      height: 15%;
      width: 20px;
 }

   
</style>